<template>
	<view class="">
		<view v-if="isSelect" class="u-f-r edit">
			<view class="u-f-ajc" @click="allSelectAction">{{ isAllSelect?'取消全选':'全选'}}</view>
			<view class="u-f-c u-f-ajc" @click="deleteAction">
				<image class="icon" src="https://statics.xmcsrv.net/weixin/trash.png" mode=""></image>
				<text>删除</text>
			</view>
			<view class="u-f-c u-f-ajc" @click="shareAction">
				<image class="icon" src="https://statics.xmcsrv.net/weixin/share.png" mode=""></image>
				<text>分享</text>
			</view>
			<view class="u-f-ajc" @click="cancelAction">取消</view>
		</view>
		<view :style="{marginTop:isSelect?'160rpx':'0rpx'}">
			<view class="itemList" >
				<!-- <view class="time">{{item.date}}</view> -->
				<view class="u-f-wrap u-f-r items">
					<view class="img" v-for="(item,index2) in list" :key="index2">
						<image :src="item.image" @longpress="longclick(index2)"></image>
						<!-- <view v-if="isSelect" class="select" @click="selectPicClick(item2)">
							<uni-icons v-if="!item.selected" type="circle" color="#e5e5e5" size="30"></uni-icons>
							<uni-icons v-else type="checkbox" color="#FF0025" size="30"></uni-icons>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="u-f-ajc calendar" @click="createPic">
			<text>创建全景图</text>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				device:{},
				mr10:'10rpx',
				// list:[{date:'2022-06-08',items:[{id:0,selected:false},{id:1,selected:false},{id:2,selected:false}]},{date:'2022-06-10',items:[{id:3,selected:false},{id:4,selected:false},{id:5,selected:false},{id:6,selected:false},{id:7,selected:false}]}],
				list:[],
				date:'',
				isSelect:false, //是否长按
				isAllSelect:false, //是否全选
			}
		},
		onLoad(opt) {
			console.log('dddddddddddd全景',opt);
			this.device = JSON.parse(opt.device)
			let list = [0,1,2,3,4,5,6,7,8]
			list.forEach((item)=>{
				this.list.push({selected:true,id:item})
			})
		},
		methods:{
			//创建全景图
			createPic(){
				// let data = {Name:'GoToPosition'}
				// let token = this.device.token
				// getApp().globalData.api.getability(data,token, (result) => {
					
				// });
				this.setOPPTZControl(2)
				
			},
			// 设置预置点
			setOPPTZControl(type){
				let token = this.device.token;
				let data = {
					Name: 'OPPTZControl',
					OPPTZControl: {
						Command: 'SetPreset',
						Parameter: {
							Preset: 250,
							Channel: 0,
							PresetName: '预置点250'
						}
					}
				};
				getApp().globalData.api.opdev(data, token, (result) => {
					console.log('up-stop:', result);
					if(type == 2){
						this.captureAction()
					}
				});
			},
			// 实时抓图
			captureAction(){
				const token = this.device.token;
				const data = {
					Name: 'OPSNAP',
					OPSNAP: {
						Channel: 0,
						picType: 1
					}
				};
				this.list.forEach((item)=>{
					getApp().globalData.api.capture(data,token, (result) => {
						this.$set(item,'image',result.image)
					});
				})
			},
			
			//长按图片
			longclick(index){
				this.list.forEach((item,i)=>{
					item.items.forEach((item2)=>{
						item2.selected = false
					})
				})
				this.isSelect = true
			},
			//选择图片
			selectPicClick(e){
				this.list.forEach((item,i)=>{
					item.items.forEach((item2)=>{
						if(item2.id == e.id){
							item2.selected = !item2.selected
						}
					})
				})
			},
			//全选
			allSelectAction(){
				this.isAllSelect = !this.isAllSelect
				this.list.forEach((item,i)=>{
					item.items.forEach((item2)=>{
						item2.selected = this.isAllSelect?true:false
					})
				})
				
			},
			// 删除
			deleteAction(){
				
			},
			// 分享
			shareAction(){
				
			},
			// 取消
			cancelAction(){
				this.isSelect = false
				this.list.forEach((item,i)=>{
					item.items.forEach((item2)=>{
						item2.selected = false
					})
				})
			},
			// 选中日期
			chooseDate(e){
				console.log(e);
				this.date = e[0] + "~" +e[1]
			},
			
		}
		
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.edit{
		z-index: 10;
		position: fixed;
		left: 0;
		right: 0;
		top: 84rpx;
		color: #FF0025;
		font-size: 26rpx;
		font-weight: 500;
		border-bottom: 1px solid #DEDEDE;
		padding: 30rpx 0;
		background: white;
		view{
			flex: 1;
		}
		.icon{
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 10rpx;
		}
	}
	.itemList{
		// margin-top: 160rpx;
		.time{
			font-size: 26rpx;
			height: 84rpx;
			line-height: 84rpx;
			color: #6B6B6B;
			margin-left: 30rpx;
		}
		.items{
			width: 100%;
			.img{
				position: relative;
				width: 33%;
				height: 200rpx;
				margin-top: 5rpx;
				background:#999;
				
				image{
					width: 100%;
					height:100%;
				}
				.select{
					position: absolute;
					right: 10rpx;
					top: 10rpx;
				}
			}
		}
		.items .img:not(:nth-child(3n)){
			margin-right: 0.5%;
		}
	}
	
	.calendar{
		height: 84rpx;
		background: white;
		border: 1rpx solid #B9B9B9;
		border-radius: 15rpx;
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
		color: #2CBDB8;
		text{
			margin-left: 10rpx;
		}
	}
</style>